Dynamic Data

Data in Getting Started Example is directly updated by using setOption. But in many cases, the data needs to be filled by asynchronous loading frequently. ECharts can implement asynchronous loading in a simple way. You can get data asynchronously through a function such as jQuery and use setOption to fill in data and configs after the chart initialized.

Or display empty axes with all styles defined before fill in the data:

For example:

You need to use name to "navigate" ECharts when updating data. In the previous example, the chart can update normally depending on the order of series, but we recommend you to add the name data while updating data.

When it takes a long time to load the data, the user is facing the empty chart with only axes will wonder if there is a bug.

ECharts have a simple loading animation by default. You can call showLoading to display. When the data loading was completed, call hideLoading to hide the animation.

Here is the effect:

ECharts was driven by data, change in data will drive changes in the presentation of the chart. Therefore, It's surprisingly simple to implement a dynamic update.

All data's updates were implemented by setOption. You only need to fetch the data periodically. ECharts will find the difference between two groups of data to use the proper way to choose the animation.

Check the following example.